<template>
  <div :class="{mask:showArea}" @click="cancelArea">
    <div class="cinema_header">
      <div class="town fl pr" @click="showCityList">
        <div>{{cityName}}</div>
        <span></span>
      </div>
      <div class="town region fl pr" @click="showAreaAction">
        <div>{{area}}</div>
        <span></span>
      </div>
    </div>
    <ul class="area-item" v-show="showArea" @click="selectAreaAction">
      <li>全部区域（{{allArea.length}}）</li>
      <li v-for="item in regionOrder" :key="item.id">{{ item }}（{{regionCinemas[item].length}}）</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      area: "全部区域",
      showArea: false,
      allArea: [],
      regionOrder: [],
      regionCinemas: {}
    };
  },
  methods: {
    ...mapMutations([
      "pushLoadStack",
      "completeLoad",
      "showCityList",
      "updateAreaData"
    ]),
    matchCityStr(str) {
      let randomList = ["bj", "sh", "gz"];
      let randomCity = randomList[Math.floor(3 * Math.random())];
      switch (str) {
        case "北京":
          return "bj";
        case "上海":
          return "sh";
        case "广州":
          return "gz";
        default:
          return randomCity;
      }
    },
    getCinema(cityName) {
      this.pushLoadStack();
      let cityStr = this.matchCityStr(cityName);
      this.$axios
        .get(`/movie/cinema/?city=${cityStr}`)
        .then(res => {
          // console.log(res);
          let data = res.data.data.data.returnValue;
          let regionOrder = data.regionOrder;
          let regionCinemas = data.regionCinemas;
          this.regionOrder = regionOrder;
          this.regionCinemas = regionCinemas;
          regionOrder.forEach(item => {
            // console.log(item)
            regionCinemas[item].forEach(items => {
              // console.log(items)
              this.allArea.push(items);
            });
          });
        })
        .then(this.completeLoad);
    },
    selectAreaAction(event) {
      let str = event.target.innerHTML.trim();
      let reg = /([\u4e00-\u9fa5]*)\（/;
      this.area = reg.exec(str)[1];
      this.showArea = false;
      document.documentElement.style.overflow = "scroll";
    },
    showAreaAction() {
      this.showArea = true;
      document.documentElement.style.overflow = "hidden";
    },
    cancelArea(event) {
      if (event.target.className === "mask") {
        this.showArea = false;
        document.documentElement.style.overflow = "scroll";
      }
    }
  },
  computed: {
    ...mapGetters(["cityName"])
  },
  watch: {
    area() {
      if (this.area === "全部区域") {
        this.updateAreaData({ area: this.allArea });
      } else {
        this.updateAreaData({ area: this.regionCinemas[this.area] });
      }
    },
    cityName() {
      this.getCinema(this.cityName);
      this.area = "全部区域";
      setTimeout(() => {
        this.updateAreaData({ area: this.allArea });
      }, 0);
    }
  },
  created () {
		this.getCinema(this.$store.state.name)
		setTimeout(() => {
			this.updateAreaData({area: this.allArea})
		}, 0)
	}
};
</script>

<style>
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 999999;
}
.cinema_header {
  width: 100%;
  height: 40px;
  background-color: #fafafa;
  line-height: 24px;
  font-size: 14px;
  padding: 8px 0;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  border-bottom: 1px solid #ebebeb;
}
.cinema_header div {
  text-align: center;
}
.town {
  width: 45%;
}
.town div {
  display: inline-block;
}
.town span {
  display: inline-block;
  margin-left: 8px;
  width: 6px;
  height: 6px;
  border-left: 1px solid #50505a;
  border-bottom: 1px solid #50505a;
  transform: rotate(-45deg);
  position: absolute;
  top: 8px;
}
.region {
  width: 55%;
}
.area-item {
  background-color: #fff;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
  max-height: 70%;
  padding-left: 15px;
  overflow-y: scroll;
  margin-top: 40px;
}
.area-item li {
  padding: 14px 0;
  border-bottom: 1px solid #ebebeb;
}
</style>

